<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
            align-items: center;
        }
        .login-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .form-floating label {
            color: #6c757d;
        }
        .btn-login {
            background-color: #0d6efd;
            border: none;
            padding: 10px 0;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login-container">
        <h2 class="text-center mb-4">系统登录</h2>

        <form id="loginForm" action="${pageContext.request.contextPath}/wnManager/login" method="post" novalidate>
            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">

            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="username" name="username"
                       placeholder="用户名" required minlength="4" maxlength="20">
                <label for="username">账号</label>
                <div class="invalid-feedback">请输入4-20位的账号</div>
            </div>

            <div class="form-floating mb-4">
                <input type="password" class="form-control" id="password" name="password"
                       placeholder="密码" required minlength="6" maxlength="20">
                <label for="password">密码</label>
                <div class="invalid-feedback">密码长度需在6-20位之间</div>
            </div>

            <div class="d-grid mb-3">
                <button class="btn btn-primary btn-login" type="submit">登录</button>
            </div>

            <div class="d-flex justify-content-between">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="rememberMe" name="remember-me">
                    <label class="form-check-label" for="rememberMe">记住我</label>
                </div>
                <a href="${pageContext.request.contextPath}/forgot-password" class="text-decoration-none">忘记密码?</a>
            </div>
        </form>

        <hr class="my-4">

        <div class="text-center">
            <p class="text-muted">还没有账号? <a href="${pageContext.request.contextPath}/admin/register">立即注册</a></p>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 表单验证
    (function() {
        'use strict';

        const form = document.getElementById('loginForm');

        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }

            form.classList.add('was-validated');
        }, false);

        // 密码显示/隐藏功能
        const passwordInput = document.getElementById('password');
        const togglePassword = document.createElement('span');
        togglePassword.style.position = 'absolute';
        togglePassword.style.right = '10px';
        togglePassword.style.top = '50%';
        togglePassword.style.transform = 'translateY(-50%)';
        togglePassword.style.cursor = 'pointer';
        togglePassword.style.zIndex = '5';

        passwordInput.parentElement.style.position = 'relative';
        passwordInput.parentElement.appendChild(togglePassword);

        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
        });
    })();
</script>
</body>
</html>